import React, { useRef } from 'react';
import { Text, Box, Cylinder, Sphere, Plane } from '@react-three/drei';
import * as THREE from 'three';

interface IndoorCafeEnvironmentProps {
  radius?: number;
}

export const IndoorCafeEnvironment: React.FC<IndoorCafeEnvironmentProps> = ({ 
  radius = 18 
}) => {
  const envRef = useRef<THREE.Group>(null);
  const GROUND_LEVEL = 0;

  return (
    <group ref={envRef}>
      {/* 室内环境 - 四面墙壁 */}
      {/* 地面 */}
      <Plane 
        args={[radius * 2, radius * 2]} 
        rotation={[-Math.PI / 2, 0, 0]}
        position={[0, GROUND_LEVEL, 0]}
        receiveShadow
      >
        <meshStandardMaterial 
          color="#D2691E" 
          roughness={0.8}
        />
      </Plane>

      {/* 天花板 */}
      <Plane 
        args={[radius * 2, radius * 2]} 
        rotation={[Math.PI / 2, 0, 0]}
        position={[0, 5, 0]}
      >
        <meshStandardMaterial 
          color="#F5F5DC" 
          roughness={0.6}
        />
      </Plane>

      {/* 四面墙壁 */}
      {/* 前墙 */}
      <Plane 
        args={[radius * 2, 5]} 
        position={[0, 2.5, -radius]}
        receiveShadow
      >
        <meshStandardMaterial color="#DEB887" roughness={0.7} />
      </Plane>

      {/* 后墙 */}
      <Plane 
        args={[radius * 2, 5]} 
        position={[0, 2.5, radius]}
        rotation={[0, Math.PI, 0]}
        receiveShadow
      >
        <meshStandardMaterial color="#DEB887" roughness={0.7} />
      </Plane>

      {/* 左墙 */}
      <Plane 
        args={[radius * 2, 5]} 
        position={[-radius, 2.5, 0]}
        rotation={[0, Math.PI / 2, 0]}
        receiveShadow
      >
        <meshStandardMaterial color="#DEB887" roughness={0.7} />
      </Plane>

      {/* 右墙 */}
      <Plane 
        args={[radius * 2, 5]} 
        position={[radius, 2.5, 0]}
        rotation={[0, -Math.PI / 2, 0]}
        receiveShadow
      >
        <meshStandardMaterial color="#DEB887" roughness={0.7} />
      </Plane>

      {/* 窗户装饰 */}
      {[-6, 0, 6].map((x, i) => (
        <group key={`window-${i}`}>
          {/* 窗框 */}
          <Box
            position={[x, 3, -radius + 0.1]}
            args={[2.5, 2, 0.2]}
            castShadow
          >
            <meshStandardMaterial color="#8B4513" />
          </Box>
          {/* 玻璃 */}
          <Box
            position={[x, 3, -radius + 0.05]}
            args={[2.2, 1.7, 0.05]}
          >
            <meshStandardMaterial 
              color="#87CEEB" 
              transparent 
              opacity={0.3}
            />
          </Box>
        </group>
      ))}

      {/* 咖啡吧台 - 长条形 */}
      <group position={[0, GROUND_LEVEL, radius - 4]}>
        {/* 吧台主体 */}
        <Box
          position={[0, 0.6, 0]}
          args={[12, 1.2, 2]}
          castShadow
          receiveShadow
        >
          <meshStandardMaterial color="#8B4513" />
        </Box>

        {/* 吧台台面 */}
        <Box
          position={[0, 1.3, 0]}
          args={[12.5, 0.1, 2.2]}
          castShadow
        >
          <meshStandardMaterial color="#A0522D" roughness={0.3} />
        </Box>

        {/* 咖啡机 */}
        <group position={[-3, 1.4, -0.5]}>
          <Box args={[1, 1.5, 0.8]} castShadow>
            <meshStandardMaterial color="#2F4F4F" metalness={0.8} />
          </Box>
          <Cylinder position={[0, 0.8, 0.6]} args={[0.1, 0.1, 0.3]} castShadow>
            <meshStandardMaterial color="#FF4500" />
          </Cylinder>
        </group>

        {/* 收银台 */}
        <group position={[4, 1.4, 0]}>
          <Box args={[1.5, 0.8, 1]} castShadow>
            <meshStandardMaterial color="#4B0082" />
          </Box>
          <Box position={[0, 0.5, 0]} args={[0.8, 0.3, 0.6]} castShadow>
            <meshStandardMaterial color="#000000" />
          </Box>
        </group>
      </group>

      {/* 室内座位区 - 更紧凑的布局 */}
      {/* 靠墙的卡座 */}
      {[
        { pos: [-12, 0, -8], rot: 0 },
        { pos: [-12, 0, 0], rot: 0 },
        { pos: [-12, 0, 8], rot: 0 },
        { pos: [12, 0, -8], rot: Math.PI },
        { pos: [12, 0, 0], rot: Math.PI },
        { pos: [12, 0, 8], rot: Math.PI }
      ].map((booth, i) => (
        <group key={`booth-${i}`} position={booth.pos} rotation={[0, booth.rot, 0]}>
          {/* 卡座背靠 */}
          <Box position={[0, 0.6, -1]} args={[3, 1.2, 0.3]} castShadow>
            <meshStandardMaterial color="#8B0000" />
          </Box>
          {/* 卡座座椅 */}
          <Box position={[0, 0.25, -0.7]} args={[3, 0.5, 0.6]} castShadow>
            <meshStandardMaterial color="#DC143C" />
          </Box>
          {/* 卡座桌子 */}
          <Box position={[0, 0.4, 0.3]} args={[2.5, 0.05, 1]} castShadow receiveShadow>
            <meshStandardMaterial color="#8B4513" />
          </Box>
        </group>
      ))}

      {/* 中央圆桌区域 */}
      {[
        { pos: [-6, 0, -3] },
        { pos: [6, 0, -3] },
        { pos: [-6, 0, 3] },
        { pos: [6, 0, 3] },
        { pos: [0, 0, -6] },
        { pos: [0, 0, 0] }
      ].map((table, i) => (
        <group key={`table-${i}`} position={table.pos}>
          {/* 桌面 */}
          <Cylinder
            position={[0, 0.4, 0]}
            args={[0.8, 0.8, 0.05]}
            castShadow
            receiveShadow
          >
            <meshStandardMaterial color="#8B4513" />
          </Cylinder>
          {/* 桌腿 */}
          <Cylinder
            position={[0, 0.2, 0]}
            args={[0.05, 0.05, 0.4]}
            castShadow
          >
            <meshStandardMaterial color="#654321" />
          </Cylinder>

          {/* 椅子 */}
          {[0, Math.PI / 2, Math.PI, (3 * Math.PI) / 2].map((angle, chairIndex) => {
            const chairX = Math.cos(angle) * 1.2;
            const chairZ = Math.sin(angle) * 1.2;
            
            return (
              <group 
                key={chairIndex} 
                position={[chairX, GROUND_LEVEL, chairZ]}
                rotation={[0, angle + Math.PI, 0]}
              >
                {/* 椅座 */}
                <Box position={[0, 0.25, 0]} args={[0.4, 0.05, 0.4]} castShadow>
                  <meshStandardMaterial color="#8B4513" />
                </Box>
                {/* 椅背 */}
                <Box position={[0, 0.5, -0.17]} args={[0.4, 0.5, 0.05]} castShadow>
                  <meshStandardMaterial color="#8B4513" />
                </Box>
                {/* 椅腿 */}
                {[[-0.15, -0.15], [0.15, -0.15], [-0.15, 0.15], [0.15, 0.15]].map((legPos, legIndex) => (
                  <Cylinder
                    key={legIndex}
                    position={[legPos[0], 0.125, legPos[1]]}
                    args={[0.02, 0.02, 0.25]}
                    castShadow
                  >
                    <meshStandardMaterial color="#654321" />
                  </Cylinder>
                ))}
              </group>
            );
          })}
        </group>
      ))}

      {/* 装饰元素 */}
      {/* 吊灯 */}
      {[
        { pos: [-6, 4, -6] },
        { pos: [6, 4, -6] },
        { pos: [-6, 4, 6] },
        { pos: [6, 4, 6] },
        { pos: [0, 4, 0] }
      ].map((light, i) => (
        <group key={`chandelier-${i}`} position={light.pos}>
          <Cylinder args={[0.3, 0.2, 0.8]} castShadow>
            <meshStandardMaterial color="#FFD700" metalness={0.8} />
          </Cylinder>
          <pointLight
            intensity={1.2}
            distance={8}
            color="#FFFACD"
            castShadow
          />
        </group>
      ))}

      {/* 墙上装饰画 */}
      {[
        { pos: [-radius + 0.1, 3, -6], rot: [0, Math.PI / 2, 0] },
        { pos: [-radius + 0.1, 3, 6], rot: [0, Math.PI / 2, 0] },
        { pos: [radius - 0.1, 3, -6], rot: [0, -Math.PI / 2, 0] },
        { pos: [radius - 0.1, 3, 6], rot: [0, -Math.PI / 2, 0] }
      ].map((painting, i) => (
        <group key={`painting-${i}`} position={painting.pos} rotation={painting.rot}>
          <Box args={[1.5, 1, 0.1]} castShadow>
            <meshStandardMaterial color="#8B4513" />
          </Box>
          <Plane args={[1.2, 0.8]} position={[0, 0, 0.06]}>
            <meshStandardMaterial color="#FF6347" />
          </Plane>
        </group>
      ))}

      {/* 绿植装饰 */}
      {[
        { pos: [-14, 0, -12] },
        { pos: [14, 0, -12] },
        { pos: [-14, 0, 12] },
        { pos: [14, 0, 12] }
      ].map((plant, i) => (
        <group key={`plant-${i}`} position={plant.pos}>
          <Cylinder
            position={[0, 0.4, 0]}
            args={[0.4, 0.3, 0.8]}
            castShadow
          >
            <meshStandardMaterial color="#8B4513" />
          </Cylinder>
          <Sphere
            position={[0, 1, 0]}
            args={[0.5]}
            castShadow
          >
            <meshStandardMaterial color="#228B22" />
          </Sphere>
        </group>
      ))}

      {/* 店铺标志 */}
      <group position={[0, 4.5, -radius + 0.2]}>
        <Box args={[6, 1, 0.2]} castShadow>
          <meshStandardMaterial color="#FFF8DC" />
        </Box>
        <Text
          position={[0, 0, 0.15]}
          fontSize={0.4}
          color="#8B4513"
          anchorX="center"
          anchorY="middle"
          castShadow
        >
          浪漫室内咖啡厅
        </Text>
      </group>

      {/* 环境光照 */}
      <ambientLight intensity={0.3} />
      
      {/* 主要光源 */}
      <directionalLight 
        position={[5, 10, 5]} 
        intensity={0.8} 
        castShadow
        shadow-mapSize={[2048, 2048]}
        shadow-camera-far={50}
        shadow-camera-left={-25}
        shadow-camera-right={25}
        shadow-camera-top={25}
        shadow-camera-bottom={-25}
      />
      
      {/* 边界检测 - 无形墙壁 */}
      <Sphere args={[radius]} position={[0, 0, 0]}>
        <meshBasicMaterial 
          transparent 
          opacity={0}
          side={THREE.BackSide}
        />
      </Sphere>
    </group>
  );
};